<template>
  <div class="prolist" >
    <ul class="proitem" v-for="item of prolist" :key="item.proId">
      <li>
        <div class="proimg">
          <van-image
          lazy-load
          :src="item.proImg"
        />
        </div>
        <div class="proinfo">
          <span style="color: #FF6666;font-size: 12.5px">{{ item.price }}</span>
          <i>
            <img src="@/assets/cailanzi.png" alt="">
          </i>
          <span  style="color: #999;font-size: 12.5px">{{ item.proUnit }}</span>
          <p  style="color: #9999;font-size: 12px">{{ item.proTitle }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
import { Image } from 'vant'
Vue.use(Image)
export default {
  props: {
    prolist: {
      type: Array,
      defaulf: () => {
        return []
      }
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.proitem{
  @include rect(100%, auto);
  background-color: #fff;
  margin-top: 10px;
  li{
  background-color: #fff;
    float: left;
    display: inline-block;
    @include rect(187px, auto);
    // @include border(1px  skyblue solid);
    box-sizing: border-box;
    .proimg{
      @include rect(163px, 100px);
      margin-top: 10px;
      .van-image__loading{
        top: -9px;
      }
      img{
       @include rect(163px, 100px);
        @include display(block);
        // @include border(1px red solid );
        margin: 0 12px;
      }
    }
    .proinfo{
      text-align: center;
      margin-top: 10px;
      span{
        display: inline-block;
        padding:5px 5px;
      }
      i{
        display: inline-block;
        background-color: #00CC99;
        @include rect(30px, 30px);
        border-radius: 50%;
        padding: 4px;
      }
      p{
        text-align: center;
        margin-top: 5px;
      }
    }
  }
}
</style>
